<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增健康数据 | VigorLoop</title>

    <!--STYLESHEET-->
    <!--=================================================-->

    <!--Open Sans Font [ OPTIONAL ]-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/bootstrap.min.css" rel="stylesheet">


    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo-icons.min.css" rel="stylesheet">


    <!--Demo [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo.min.css" rel="stylesheet">


    <!--Switchery [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/switchery/switchery.min.css" rel="stylesheet">


    <!--Bootstrap Select [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">


    <!--Bootstrap Tags Input [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.css" rel="stylesheet">


    <!--Chosen [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/chosen/chosen.min.css" rel="stylesheet">


    <!--noUiSlider [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/noUiSlider/nouislider.min.css" rel="stylesheet">


    <!--Select2 [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/select2/css/select2.min.css" rel="stylesheet">


    <!--Bootstrap Timepicker [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet">


    <!--Bootstrap Datepicker [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet">


    <!--JAVASCRIPT-->
    <!--=================================================-->

    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="/static/nifty/plugins/pace/pace.min.css" rel="stylesheet">
    <script src="/static/nifty/plugins/pace/pace.min.js"></script>


    <!--jQuery [ REQUIRED ]-->
    <script src="/static/nifty/js/jquery-2.2.4.min.js"></script>


    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/bootstrap.min.js"></script>


    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/nifty.min.js"></script>


    <!--=================================================-->

    <!--Demo script [ DEMONSTRATION ]-->
    <script src="/static/nifty/js/demo/nifty-demo.min.js"></script>


    <!--Switchery [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/switchery/switchery.min.js"></script>


    <!--Bootstrap Select [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/bootstrap-select/bootstrap-select.min.js"></script>


    <!--Bootstrap Tags Input [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>


    <!--Chosen [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/chosen/chosen.jquery.min.js"></script>


    <!--noUiSlider [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/noUiSlider/nouislider.min.js"></script>


    <!--Select2 [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/select2/js/select2.min.js"></script>


    <!--Bootstrap Timepicker [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>


    <!--Bootstrap Datepicker [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>


    <!--Form Component [ SAMPLE ]-->
    <script src="/static/nifty/js/demo/form-component.js"></script>

</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">

            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="" class="navbar-brand">
                    <img src="/static/nifty/img/logo.png" alt="VigorLoop Logo" class="brand-icon">
                    <div class="brand-title">
                        <span class="brand-text">VigorLoop</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->


            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content clearfix">
                <ul class="nav navbar-top-links pull-left">

                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <i class="demo-pli-view-list"></i>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->


                </ul>
                <ul class="nav navbar-top-links pull-right">

                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                <span class="pull-right">
                                    <!--<img class="img-circle img-user media-object" src="/static/nifty/img/profile-photos/1.png" alt="Profile Picture">-->
                                    <i class="demo-pli-male ic-user"></i>
                                </span>
                            <div class="username hidden-xs">
                                {% if user.is_authenticated %}{{ user.username }}{% else %}未登录用户{% endif %}</div>
                        </a>


                        <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">

                            <!-- Dropdown heading  -->
                            <div class="pad-all bord-btm">
                                欢迎使用 VigorLoop！
                            </div>


                            <!-- User dropdown menu -->
                            <ul class="head-list">
                                <li>
                                    <a href="/user_center/">
                                        <i class="demo-pli-male icon-lg icon-fw"></i> 个人中心
                                    </a>
                                </li>

                            </ul>

                            <!-- Dropdown footer -->
                            <div class="pad-all text-right">
                                <a href="/logout/" class="btn btn-primary">
                                    <i class="demo-pli-unlock"></i> 退出
                                </a>
                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->
                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->

        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">

            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title">
                <h1 class="text-lg-center">新增您的健康数据</h1>
            </div>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End page title-->

            <!--Page content-->
            <!--===================================================-->
            <div class="col-sm-12">
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title">新增您的健康数据</h3>
                    </div>
                     <!-- 显示消息部分 -->
                    <div class="panel-body">
                        {% if messages %}
                        <div class="alert alert-dismissible">
                            {% for message in messages %}
                            <div class="alert
                                 {% if message.tags %}alert-{{ message.tags }}{% else %}alert-info{% endif %}"
                                 role="alert">
                                {{ message }}
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>


                    <!--Horizontal Form-->
                    <!--===================================================-->
                    <form method="POST" id="healthForm" class="panel-body form-horizontal form-padding">
                        {% csrf_token %}

                        <!-- 身高 -->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="height">身高 (cm):</label>
                            <div class="col-md-8">
                                <input type="number" name="height" id="height" class="form-control"
                                       placeholder="请输入您的身高" >
                            </div>
                        </div>

                        <!-- 体重 -->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="weight">体重 (kg):</label>
                            <div class="col-md-8">
                                <input type="number" name="weight" id="weight" class="form-control"
                                       placeholder="请输入您的体重" >
                            </div>
                        </div>

                        <!-- 血压高压 -->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="systolic_bp">血压高压 (mmHg):</label>
                            <div class="col-md-8">
                                <input type="number" name="systolic_bp" id="systolic_bp" class="form-control"
                                       placeholder="请输入您的血压高压" >
                            </div>
                        </div>

                        <!-- 血压低压 -->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="diastolic_bp">血压低压 (mmHg):</label>
                            <div class="col-md-8">
                                <input type="number" name="diastolic_bp" id="diastolic_bp" class="form-control"
                                       placeholder="请输入您的血压低压" >
                            </div>
                        </div>

                        <!-- 血糖 -->
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="blood_sugar">血糖 (mmol/L):</label>
                            <div class="col-md-8">
                                <input type="number" step="0.1" name="blood_sugar" id="blood_sugar" class="form-control"
                                       placeholder="请输入您的血糖" >
                            </div>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="panel-footer text-right">
                            <button class="btn btn-success" type="submit">提交健康记录</button>
                        </div>
                    </form>

                    <!--===================================================-->
                    <!--End Horizontal Form-->

                </div>
            </div>
        </div>
        <!--===================================================-->
        <!--End page content-->


    </div>
    <!--===================================================-->
    <!--END CONTENT CONTAINER-->


    <!--MAIN NAVIGATION-->
    <!--===================================================-->
    <nav id="mainnav-container">
        <div id="mainnav">

            <!--Menu-->
            <!--================================-->
            <div id="mainnav-menu-wrap">
                <div class="nano">
                    <div class="nano-content">

                        <!--Profile Widget-->
                        <!--================================-->
                        <div id="mainnav-profile" class="mainnav-profile">
                            <div class="profile-wrap">
                                <div class="pad-btm">
                                    <img class="img-circle img-sm img-border"
                                         src="/static/nifty/img/profile-photos/1.png" alt="Profile Picture">
                                </div>
                                <a href="#profile-nav" class="box-block" data-toggle="collapse" aria-expanded="false">
                                    <p class="mnp-name">{% if user.is_authenticated %}{{ user.username }}{% else %}
                                        未登录用户{% endif %}</p>
                                </a>
                            </div>
                        </div>

                        <ul id="mainnav-menu" class="list-group">

                            <!--Category name-->
                            <li class="list-header">健康中心</li>

                            <!--Menu list item-->
                            <li>
                                <a href="/index/">
                                    <i class="demo-psi-home"></i>
                                    <span class="menu-title">
												<strong>首页</strong>
											</span>
                                </a>
                            </li>

                            <!--Menu list item-->
                            <li>
                                <a href="#">
                                    <i class="demo-psi-boot-2"></i>
                                    <span class="menu-title">
												<strong>我的运动数据</strong>
											</span>
                                    <i class="arrow"></i>
                                </a>

                                <!--Submenu-->
                                <ul class="collapse">
                                    <li><a href="/exercise_info/exercise_record/">查看运动数据</a></li>
                                    <li><a href="/exercise_info/add_exercise_record/">新增运动数据</a></li>
                                </ul>
                            </li>

                            <li>
                                    <a href="#">
                                        <i class="demo-psi-star"></i>
                                        <span class="menu-title">
												<strong>我的运动目标</strong>
											</span>
                                        <i class="arrow"></i>
                                    </a>

                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="/exercise_info/exercise_goal/">查看运动目标</a></li>
                                        <li><a href="/exercise_info/add_exercise_goal/">新增运动目标</a></li>
                                    </ul>
                                </li>

                            <!--Menu list item-->
                            <li class="active-sub active">
                                <a href="/health_profile/">
                                    <i class="demo-psi-receipt-4"></i>
                                    <span class="menu-title">
												<strong>我的健康数据</strong>
											</span>
                                    <i class="arrow"></i>
                                </a>

                                <!--Submenu-->
                                <ul class="collapse">
                                    <li><a href="/health_profile/">查看健康数据</a></li>
                                    <li class="active-link"><a href="/health_profile/add/">新增健康数据</a></li>
                                    <li><a href="/health_profile/analysis">健康分析</a></li>
                                </ul>
                            </li>

                            <li class="list-divider"></li>

                            <!--Category name-->
                            <li class="list-header">其他</li>

                            <!--Menu list item-->
                            <li>
                                <a href="/user_center/">
                                    <i class="demo-psi-male"></i>
                                    <span class="menu-title">
												<strong>个人中心</strong>
											</span>
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <!--================================-->
            <!--End menu-->

        </div>
    </nav>
    <!--===================================================-->
    <!--END MAIN NAVIGATION-->

</div>
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->

</body>
</html>
